<template>

        <div class="boxOutside" v-bind:class="{'boxOutside1':isWinner}">
            <div class="img">
                <img src="../../public/touzi_icon.png" :class="{'img1':isWinner}"/>
                <img src="../../public/touzi_icon.png" :class="{'img1':isWinner}"/>
            </div>
            <div class="boxInside" :class="{'boxInside1':isWinner}">
                <div class="playerIndex" :class="{'playerIndex1':isWinner}">玩家{{playerIndex}}</div>
                <div class="box" v-bind:class="{'box1':isWinner}">
                    <Dice :currentNumber="points[j-1]" v-for="j in 5" :key="j" v-show="isShow"/>
                    <button class="shake" @click="shake()" v-show="!isShow">摇一摇</button>
                </div>
                <div class="playerResult" :class="{'playerResult1':isWinner}">{{playerPaiXin}}</div>
            </div>
            <div class="img">
                <img src="../../public/touzi_icon.png"/>
                <img src="../../public/touzi_icon.png"/>
            </div>

        </div>
</template>

<script>
    import Dice from "@/components/Dice";
    import eventVue from "@/components/utils/event-vue";

    export default {
        name: "Player",
        data() {
            return {
                points: [],
                isShow: false,
                player: {
                    isHave: false,//判断有没有牛
                    whatBow: 0,//判断牛几
                    playerScore: [0, 0],
                    isFiveBoom: false,
                    fiveBoom: 0,
                    isFiveSmallBow: false,
                    fiveSmallBow: 0,
                    fourBoom: 0,
                    isFourBoom: false,
                    points: 0
                },//玩家结果集
                isWinner: false,
                startFlash: '',
                stopFlash: '',
                playerPaiXin:''
            }
        },
        props: {
            playerIndex: Number
        },
        methods: {
            shake() {
                //骰子开始闪烁

                this.startFlash = setInterval(this.flash, 10);
                this.stopFlash = setTimeout(this.destroyFlash, 1000)

                this.isShow = true

            },
            quChong(player) {
                var arr = this.points.concat()
                var arr1 = this.points.concat()
                var count = 0//计算有几个重复数

                for (var i = 0, len = arr.length; i < len; i++) {
                    // eslint-disable-next-line no-redeclare
                    for (var j = i + 1, len = arr.length; j < len; j++) {
                        if (arr[i] === arr[j]) {
                            player.fourBoom = arr[i]
                            count++
                            arr.splice(j, 1);
                            j--;        // 每删除一个数j的值就减1
                            len--;      // j值减小时len也要相应减1（减少循环次数，节省性能）
                            // console.log(j,len)
                        }
                    }
                }
                console.log("去重后的数组长度" + arr.length)
                if (arr.length == 1) {
                    player.fiveBoom = arr[0] + 30
                } else if ((arr1[0] + arr1[1] + arr1[2] + arr1[3] + arr1[4]) == 6) {
                    player.isFiveSmallBow = true
                    player.fiveSmallBow = 21
                } else if (arr.length == 2 && count == 4) {
                    player.isFourBoom = true
                    player.fourBoom += 10
                }
                if (!player.isFourBoom) {
                    player.fourBoom = 0
                }
                this.getPoints()
            },
            getPoints() {
                this.player.points = this.player.whatBow + this.player.fourBoom + this.player.fiveSmallBow + this.player.fiveBoom
                console.log("玩家" + this.playerIndex + "的得分为：" + this.player.points + "||" + this.player.whatBow + "--" + this.player.fourBoom + "--" + this.player.fiveSmallBow + "--" + this.player.fiveBoom)
                this.judgePaiXin()
                eventVue.$emit("points", [this.playerIndex, this.player.points])
            },
            getShow() {
                eventVue.$on("show", (isShow, points) => {
                    this.isShow = isShow
                    if (this.player.points === points) {
                        this.isWinner = true
                    } else {
                        this.isWinner = false
                    }
                    console.log("玩家" + this.playerIndex + this.isWinner)
                })
            },
            flash() {
                this.points = [Math.floor(Math.random() * 6 + 1),
                    Math.floor(Math.random() * 6 + 1),
                    Math.floor(Math.random() * 6 + 1),
                    Math.floor(Math.random() * 6 + 1),
                    Math.floor(Math.random() * 6 + 1)]
            },
            destroyFlash() {
                clearTimeout(this.startFlash);
                this.points = [Math.floor(Math.random() * 6 + 1),
                    Math.floor(Math.random() * 6 + 1),
                    Math.floor(Math.random() * 6 + 1),
                    Math.floor(Math.random() * 6 + 1),
                    Math.floor(Math.random() * 6 + 1)]
                console.log("随机数:" + this.points)
                //判断有无牛
                if (this.points[0] + this.points[1] + this.points[2] == 6 || this.points[0] + this.points[1] + this.points[2] == 12 || this.points[0] + this.points[1] + this.points[2] == 18) {
                    this.player.isHave = true
                    this.player.playerScore[0] = this.points[3]
                    this.player.playerScore[1] = this.points[4]
                    console.log("---------------1")
                } else if (this.points[0] + this.points[1] + this.points[3] == 6 || this.points[0] + this.points[1] + this.points[3] == 12 || this.points[0] + this.points[1] + this.points[3] == 18) {
                    this.player.isHave = true
                    this.player.playerScore[0] = this.points[2]
                    this.player.playerScore[1] = this.points[4]
                    console.log("---------------2")
                } else if (this.points[0] + this.points[1] + this.points[4] == 6 || this.points[0] + this.points[1] + this.points[4] == 12 || this.points[0] + this.points[1] + this.points[4] == 18) {
                    this.player.isHave = true
                    this.player.playerScore[0] = this.points[2]
                    this.player.playerScore[1] = this.points[3]
                    console.log("---------------3")
                } else if (this.points[0] + this.points[3] + this.points[4] == 6 || this.points[0] + this.points[3] + this.points[4] == 12 || this.points[0] + this.points[3] + this.points[4] == 18) {
                    this.player.isHave = true
                    this.player.playerScore[0] = this.points[2]
                    this.player.playerScore[1] = this.points[1]
                    console.log("---------------4")
                } else if (this.points[0] + this.points[3] + this.points[2] == 6 || this.points[0] + this.points[3] + this.points[2] == 12 || this.points[0] + this.points[3] + this.points[2] == 18) {
                    this.player.isHave = true
                    this.player.playerScore[0] = this.points[1]
                    this.player.playerScore[1] = this.points[4]
                    console.log("---------------5")
                } else if (this.points[0] + this.points[2] + this.points[4] == 6 || this.points[0] + this.points[2] + this.points[4] == 12 || this.points[0] + this.points[2] + this.points[4] == 18) {
                    this.player.isHave = true
                    this.player.playerScore[0] = this.points[1]
                    this.player.playerScore[1] = this.points[3]
                    console.log("---------------6")
                } else if (this.points[1] + this.points[2] + this.points[4] == 6 || this.points[1] + this.points[2] + this.points[4] == 12 || this.points[1] + this.points[2] + this.points[4] == 18) {
                    this.player.isHave = true
                    this.player.playerScore[0] = this.points[0]
                    this.player.playerScore[1] = this.points[3]
                    console.log("---------------7")
                } else if (this.points[2] + this.points[3] + this.points[4] == 6 || this.points[2] + this.points[3] + this.points[4] == 12 || this.points[2] + this.points[3] + this.points[4] == 18) {
                    this.player.isHave = true
                    this.player.playerScore[0] = this.points[1]
                    this.player.playerScore[1] = this.points[0]
                    console.log("---------------8")
                } else if (this.points[1] + this.points[2] + this.points[3] == 6 || this.points[1] + this.points[2] + this.points[3] == 12 || this.points[1] + this.points[2] + this.points[3] == 18) {
                    this.player.isHave = true
                    this.player.playerScore[0] = this.points[0]
                    this.player.playerScore[1] = this.points[4]
                    console.log("---------------9")
                } else if (this.points[1] + this.points[3] + this.points[4] == 6 || this.points[1] + this.points[3] + this.points[4] == 12 || this.points[1] + this.points[3] + this.points[4] == 18) {
                    this.player.isHave = true
                    this.player.playerScore[0] = this.points[0]
                    this.player.playerScore[1] = this.points[2]
                    console.log("---------------10")
                }
                console.log(this.player.playerScore)

                if ((this.player.playerScore[0] + this.player.playerScore[1]) > 6 && (this.player.playerScore[0] + this.player.playerScore[1]) != 12) {
                    this.player.whatBow = (this.player.playerScore[0] + this.player.playerScore[1]) % 6
                } else if ((this.player.playerScore[0] + this.player.playerScore[1]) == 12) {
                    this.player.whatBow = 6
                } else {
                    this.player.whatBow = this.player.playerScore[0] + this.player.playerScore[1]
                }
                console.log("玩家牛几：" + this.player.whatBow + "||" + (this.player.playerScore[0] + this.player.playerScore[1]) % 6 + "||" + this.player.playerScore[0] + "--" + this.player.playerScore[1])
                // this.quChong(this.points, this.points, this.player[player])
                this.quChong(this.player)
            },
            judgePaiXin(){
                if (this.player.isHave){
                    this.playerPaiXin='牛'+this.player.whatBow
                }else if (this.player.isFourBoom){
                    this.playerPaiXin='四小炸'
                }else if (this.player.isFiveSmallBow){
                    this.playerPaiXin='五小牛'
                }else if (this.player.isFiveBoom){
                    this.playerPaiXin='五炸'
                }else {
                    this.playerPaiXin='无牛'
                }
            }

        },
        components: {Dice},
        created() {
            this.getShow()
        },
        mounted() {

        },
        beforeDestroy() {
            clearTimeout(this.stopFlash);
        }
    }
</script>

<style scoped>
    .img{
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
    .img1{
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        src:url("../../public/touzi_icon_black.png");
    }
    img {
        width: 40px;
        height: 40px;
    }

    .playerResult {
        align-self: center;
        text-align: center;
        font-size: 35px;
        color: goldenrod;
        border-color: goldenrod;
        border-width: 3px;
        border-radius: 5px;
        border-style: solid;
        width: 220px;
    }

    .playerResult1 {
        align-self: center;
        text-align: center;
        font-size: 35px;
        color: #444444;
        border-color: #444444;
        border-width: 3px;
        border-radius: 5px;
        border-style: solid;
        width: 220px;
    }

    .boxOutside {
        width: 250px;
        height: 530px;
        border-style: solid;
        border-radius: 20px;
        border-width: 5px;
        border-color: #444444;
        display: flex;
        justify-content: center;
        margin: 20px;
        background: #444444;
        flex-wrap: wrap;
        box-shadow: 15px 10px 3px  rgba(66,66,66,0.3);
    }

    .boxOutside1 {
        width: 250px;
        height: 530px;
        border-style: solid;
        border-radius: 20px;
        border-width: 5px;
        border-color: goldenrod;
        display: flex;
        justify-content: center;
        margin: 20px;
        background: goldenrod;
        flex-wrap: wrap;
        box-shadow: 15px 10px 3px  rgba(66,66,66,0.3);
    }

    .boxInside {
        width: 220px;
        height: 440px;
        border-style: solid;
        border-radius: 20px;
        border-width: 5px;
        border-color: goldenrod;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        background: #444444;
    }
    .boxInside1 {
        width: 220px;
        height: 440px;
        border-style: solid;
        border-radius: 20px;
        border-width: 5px;
        border-color: #444444;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        background: goldenrod;
    }
    .playerIndex {
        align-self: center;
        text-align: center;
        font-size: 30px;
        color: #444444;
        border-color: goldenrod;
        border-width: 3px;
        border-radius: 5px;
        border-style: solid;
        width: 220px;
        background-color: goldenrod;
    }
    .playerIndex1 {
        align-self: center;
        text-align: center;
        font-size: 30px;
        color: goldenrod;
        border-color: #444444;
        border-width: 3px;
        border-radius: 5px;
        border-style: solid;
        width: 220px;
        background-color: #444444;
    }
    .box {
        align-self: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        height: 200px;
        width: 200px;
        border-radius: 10px;
    }
    .box1 {
        background: goldenrod;
        background-size:  200px  200px;
    }

    .shake {
        height: 80px;
        width: 180px;
        align-self: center;
        flex-basis: auto;
        background: #444444;
        border-color: goldenrod;
        border-radius: 5px;
        color: goldenrod;
        font-size: 230%;
    }

</style>